<script>

//学工号 验证
var validateU_Name = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入学号或工号'));
  } else {
    callback();
  }
};

// 验证姓名
var validateN_Name = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入姓名'));
  } else {
    callback();
  }
};

// 验证手机号
var checkPhone = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入手机号'));
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('请输入数字值'));
    } else {
      // 判断手机号是11位数
      if (value.toString().length !== 11) {
        callback(new Error('号码格式不正确'));
      } else {
        callback();
      }
    }
  }, 1000);
};

// 验证密码
var validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    callback();
  }
};

// 验证学院
var validateS_College = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入所在学院'));
  } else {
    callback();
  }
};

// 验证专业
var validatemajorId = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入专业名称'));
  } else {
    callback();
  }
};

// 验证角色
var validateRole = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('选择身份'));
  } else {
    callback();
  }
};

import { getDepartments, getMajorsByDepartmentId , signUp } from "@/api/user";
export default {
  name: "Register",
  data(){
    return{
      registerForm:{
        username: undefined, //学/工 号
        nickname: undefined, //姓名
        password: undefined, //密码
        phone: undefined,  //手机号
        departmentId: undefined, //学院
        majorId: undefined, //专业
        use_role: 'ROLE_student', //角色
        enrTime: undefined // 入学年份
      },
      rules: {
        username: [
          { validator: validateU_Name, trigger: 'blur' }
        ],
        nickname: [
          { validator: validateN_Name, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],

        phone: [
          { validator: checkPhone, trigger: 'blur' }
        ],
        departmentId: [
          { validator: validateS_College, trigger: 'blur' }
        ],
        majorId: [
          { validator: validatemajorId, trigger: 'blur' }
        ],
        use_role: [
          { validator: validateRole, trigger: 'blur' }
        ]
      },
      teacher:true,
      department: [], //学院数据
      major: [], // 专业数据
      loading:false
    }
  },
  methods:{
    submitForm(){
      this.$refs['registerForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          signUp(this.registerForm).then(() => {
            this.$router.push({
              path:"/login",
              query:{
                username:btoa( this.registerForm.username ),
                password:btoa(this.registerForm.password)
              }
            })

            this.loading = false
          }).catch(() => {
            this.loading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(){
      this.$refs['registerForm'].resetFields();
    },
    back(){
      this.$router.push('/login')
    },
    departmentData() {
      getDepartments().then(res => {
        this.department = res.data
        // console.log("专业",res);
      })
    },
    // 获取学院数据
    majors() {
      getMajorsByDepartmentId(this.registerForm.departmentId).then(res => {
        this.major = res.data
      })
      this.registerForm.majorId = '';  //学院清空
    },
  },
  created() {
    this.departmentData()
  }
}
</script>

<template>
  <div class="box">
    <div class="shell">
      <el-link type="primary" style="position: absolute;right: 10px;top: 20px;z-index: 2" @click="back">
        <i class="el-icon-view el-icon-arrow-left"></i>返回
      </el-link>
      <!-- 登录表单 -->
      <div class="container">
        <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="25%">

          <el-form-item label="身份" prop="use_role" class="inputs">
            <el-radio v-model="registerForm.use_role" label="ROLE_student" @change="teacher = true">学生</el-radio>
            <el-radio v-model="registerForm.use_role" label="ROLE_teacher" @change="teacher = false">教师</el-radio>
          </el-form-item>

          <el-form-item label="学号" prop="username" v-if="teacher" class="inputs" >
            <el-input v-model="registerForm.username" placeholder="请输入学号"></el-input>
          </el-form-item>

          <el-form-item label="工号" prop="username" v-else class="inputs" >
            <el-input v-model="registerForm.username" placeholder="请输入工号"></el-input>
          </el-form-item >

          <el-form-item label="姓名" prop="nickname" class="inputs" >
            <el-input v-model="registerForm.nickname" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="inputs">
            <el-input type="password" v-model="registerForm.password" autocomplete="off"  placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" class="inputs">
            <el-input v-model.number="registerForm.phone"  placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="学院" prop="departmentId" class="inputs" size="medium">
            <el-select style="width: 100%;" v-model="registerForm.departmentId" placeholder="请选择学院" @change="majors()">
              <el-option v-for="item in department" :label="item.departmentName"
                         :value="item.departmentId"
                         :key="item.departmentId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业" prop="majorId" v-if="teacher" class="inputs" size="medium">
            <el-select style="width: 100%;" v-model="registerForm.majorId" placeholder="请选择专业">
              <el-option v-for="item in major" :label="item.majorName"
                         :value="item.majorId"
                         :key="item.majorId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <div style="display: flex">
              <el-button type="primary" class="form_button button submit" style="margin: 0;"
                         :loading="loading"
                         @click="submitForm">注册</el-button>
              <el-button @click="resetForm" class="resetting">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.el-form-item{
  margin-bottom: 18px;
}
* {
  /* 字体无法选中 */
  user-select: none;

  /* border: 1px solid #ccc;  */
}

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background-color: #ecf0f3;
  color: #a0a5a8;
}

.shell {
  position: relative;
  width: 80%;
  height: 80%;
  padding: 10px;
  background-color: #ecf0f3;
  box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
}


.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ecf0f3;
}

.button {
  width: 180px;
  height: 50px;
  border-radius: 25px;
  margin-top: 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.15px;
  background-color: #4B70E2;
  color: #f9f9f9;
  box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
  border: none;
  outline: none;
}

.submit:hover {
  box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
  transform: scale(0.985);
  transition: 0.25s;
}

.resetting {
  border: 0;
  border-radius: 40px;
  color: #ccc;
  background-color: rgba(0, 0, 0, 0);
}
</style>
